<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo 1</title>
    <meta name="description" content="A slice reveal effect that shows animated slices between image transitions" />
    <meta name="keywords" content="reveal, slices, effect, animation, css, web development, web design" />
    <link th:href="@{/css/base.css}" rel="stylesheet" type="text/css" href="../static/css/base.css"  />
    <link th:href="@{/css/uncover.css}" rel="stylesheet" type="text/css" href="../static/css/uncover.css" />
    <script>
        document.documentElement.className = "js";
        var supportsCssVars = function() { var e, t = document.createElement("style"); return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e };
        supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
    </script>
</head>
<body class="demo-1 loading">
<main>
    <div class="content content--fixed">
        <header class="codrops-header">
            <h1 class="codrops-header__title">欢迎 <span shiro:principal property="userName"/> 使用至尊智能家居系统</h1>
            <nav class="demos">
                <a class="demo demo--current" href="/system/main"><span>Demo 1</span></a>
                <a class="demo" href="/system/index2"><span>Demo 2</span></a>
                <a class="demo" href="/system/index3"><span>Demo 3</span></a>
            </nav>
        </header>
        <a class="github" href="https://github.com/codrops/SliceRevealer" title="Find this project on GitHub">
            <svg class="icon icon--github">
                <use xlink:href="#icon-github"></use>
            </svg>
        </a>
        <nav class="pagination">
            <span class="pagination__item">#1</span>
            <span class="pagination__item">#2</span>
            <span class="pagination__item">#3</span>
            <span class="pagination__item">#4</span>
            <span class="pagination__item">#5</span>
        </nav>
    </div>
    <div class="slides">
        <div class="slide slide--current">
            <div class="slide__img" th:style="'background-image: url('+${'/img/7.jpg'}+');'"></div>
        </div>
        <div class="slide">
            <div class="slide__img" th:style="'background-image: url('+${'/img/10.jpg'}+');'"></div>
        </div>
        <div class="slide">
            <div class="slide__img" th:style="'background-image: url('+${'/img/8.jpg'}+');'"></div>
        </div>
        <div class="slide">
            <div class="slide__img" th:style="'background-image: url('+${'/img/9.jpg'}+');'"></div>
        </div>
        <div class="slide">
            <div class="slide__img" th:style="'background-image: url('+${'/img/6.jpg'}+');'"></div>
        </div>
    </div>
</main>
<script th:src="@{/js/imagesloaded.pkgd.min.js}"></script>
<script th:src="@{/js/anime.min.js}"></script>
<script th:src="@{/js/uncover.js}"></script>
<script th:src="@{/js/demo1.js}"></script>
</body>
</html>